<template>
  <div class="chooseType">
    <cpro-public title="选择项目类型（支持多选）" :showStat="true">
      <template v-slot:content>
        <template v-for="(item, index) in typesDescribe" :key="index">
          <el-tooltip :content="item.describe" placement="top">
            <el-button
              :class="[choices.includes(index) ? 'active' : '', 'type']"
              @click="getType(index)"
              >{{ item?.dftypes }}
            </el-button>
          </el-tooltip>
        </template>
      </template>
    </cpro-public>
  </div>
</template>

<script lang="ts" setup>
import cproPublic from '@/components/creat-projects/cpro-public.vue'
import { ref, defineExpose } from 'vue'
import { ElMessage } from 'element-plus'
interface describeType {
  dftypes: string
  describe: string
}
type propType = {
  typesDescribe: Array<describeType>
}
defineProps<propType>()
const emit = defineEmits(['updateType'])
const isActive = ref<number>(-1)
//用于记录选中过的类型的数组
const choices = ref<Array<number>>([])
const zmArr: Array<string> = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N']
// 得到用户选择的数据,并存储
const getType = (index: number) => {
  isActive.value = index
  if (choices.value.includes(index)) {
    choices.value = choices.value.filter((item: any) => item != index)
  } else {
    choices.value.push(index)
  }
  updateType()
}

const updateType = (): void => {
  let types: string = ''
  for (let i = 0; i < choices.value.length; i++) {
    types = types + zmArr[choices.value[i]]
  }
  emit('updateType', types)
}
const vailDate = (): Boolean => {
  if (!choices.value.length) {
    ElMessage({
      showClose: true,
      message: '请选择项目类型',
      type: 'error'
    })
    return true
  }
  return false
}
defineExpose({ vailDate })
</script>

<style lang="less" scoped>
.chooseType {
  margin-top: -25px;
  .active {
    background-color: var(--el-button-hover-text-color);
    color: white;
  }
  .type {
    width: 126px;
    height: 35px;
    line-height: 35px;
    margin: 6px 20px 6px 8px;
    font-size: 14px;
  }
}
</style>
